<script setup lang="ts">
import {
  PlusDialogForm,
  type PlusColumn,
  type FieldValues,
  PlusSearch
} from "plus-pro-components";
import { ref } from "vue";
import "plus-pro-components/es/components/search/style/css";
import { useColumns } from "./columns";
import { isAllEmpty } from "@pureadmin/utils";
import { ElMessage } from "element-plus";
import { updateFeedback } from "@/api/common";
defineOptions({
  name: "SystemQues"
});
const props = defineProps({
  userId: {
    type: Number,
    default: 0
  }
});

const {
  loading,
  columns,
  dataList,
  pagination,
  loadingConfig,
  adaptiveConfig,
  onSizeChange,
  loadData,
  params,
  onKeywordChange,
  onCurrentChange
} = useColumns();

const searchColumns: PlusColumn[] = [
  {
    label: "关键词",
    labelWidth: 120,
    width: 600,
    prop: "keyWord",
    valueType: "input"
  },
  // {
  //   label: "问题类型",
  //   labelWidth: 120,
  //   width: 600,
  //   prop: "quesType",
  //   valueType: "select",
  //   options: [
  //     {
  //       label: "新功能建议",
  //       value: "新功能建议"
  //     },
  //     {
  //       label: "功能异常",
  //       value: "功能异常"
  //     },
  //     {
  //       label: "体验问题",
  //       value: "体验问题"
  //     },
  //     {
  //       label: "投诉反馈",
  //       value: "投诉反馈"
  //     },
  //     {
  //       label: "其他问题",
  //       value: "其他问题"
  //     }
  //   ]
  // },
  {
    label: "状态",
    labelWidth: 120,
    width: 600,
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "未解答",
        value: 0
      },
      {
        label: "已解答",
        value: 1
      }
    ]
  }
];
const handleChangeSearch = (value: any, target: any) => {
  if (target.prop == "keyWord") {
    return;
  }
  onKeywordChange(value);
};
const handleSearch = (value: any) => {
  onKeywordChange(value);
};
const handleReset = value => {
  onKeywordChange(value);
  dataList.value = [];
};

const replyClick = row => {
  values.value = { qId: row.id, reply: row.reply, isDelete: 0 };
  visible.value = true;
};

const values = ref({});
const visible = ref(false);
const formRef = ref();
const confirmLoading = ref(false);
const formColumns: PlusColumn[] = [
  {
    label: "回复内容",
    prop: "reply",
    valueType: "input",
    tooltip: "请输入回复内容"
  },
  {
    label: "是否删除",
    prop: "isDelete",
    valueType: "radio",
    tooltip: "请输入是否删除",
    options: [
      {
        label: "否",
        value: 0
      },
      {
        label: "是",
        value: 1
      }
    ]
  }
];

const handleSubmit = async (value: FieldValues) => {
  const updatedValues = { ...values.value };
  console.log(updatedValues);
  try {
    await updateFeedback(updatedValues);
    visible.value = false;
    ElMessage.success("处理成功");
    loadData();
  } catch (error) {
    console.log(error, "updateFeedback");
  }
};
</script>

<template>
  <div class="flex flex-col">
    <PlusSearch
      class="mt-5"
      :columns="searchColumns"
      :hasUnfold="false"
      :hasFooter="true"
      :colProps="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }"
      @change="handleChangeSearch"
      @search="handleSearch"
      @reset="handleReset"
    />
    <pure-table
      ref="tableRef"
      showOverflowTooltip
      border
      row-key="id"
      class="mt-2"
      :height="400"
      alignWhole="center"
      :loading="loading"
      :adaptiveConfig="adaptiveConfig"
      :loading-config="loadingConfig"
      :data="dataList"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="onSizeChange"
      @page-current-change="onCurrentChange"
    >
      <template #operation="{ row }">
        <el-button type="primary" size="small" @click="replyClick(row)">
          回复
        </el-button>
      </template>
      <template #imgs="{ row }">
        <div class="flex flex-row flex-wrap gap-2">
          <el-image
            v-for="item in row.imgs.split(',')"
            :key="item.id"
            preview-teleported
            loading="lazy"
            :src="item"
            :preview-src-list="row.imgs.split(',')"
            fit="cover"
            class="w-[50px] h-[50px]"
          />
        </div>
      </template>
    </pure-table>
    <PlusDialogForm
      ref="formRef"
      v-model:visible="visible"
      v-model="values"
      :form="{ columns: formColumns, labelWidth: 120 }"
      :dialog="{ confirmLoading, width: '62%' }"
      title="处理反馈"
      @confirm="handleSubmit"
    />
  </div>
</template>

<style scoped></style>
